<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<h1 mat-dialog-title>Brand Guidelines</h1>

@if (isEditing && data.guideline) {
  <div mat-dialog-content class="view-mode">
    <h2 class="text-xl font-semibold mb-2">{{ data.guideline.name }}</h2>

    @if (data.guideline.colorPalette.length) {
      <div class="detail-section">
        <strong>Color Palette:</strong>
        <div class="flex flex-wrap gap-2 mt-1">
          @for (color of data.guideline.colorPalette; track color) {
            <div
              class="color-swatch"
              [style.backgroundColor]="color"
              [matTooltip]="color"
            ></div>
          }
        </div>
      </div>
    }

    @if (data.guideline.toneOfVoiceSummary) {
      <div class="detail-section">
        <strong>Tone of Voice:</strong>
        @if (isToneOfVoiceExpanded) {
          <markdown
            [data]="data.guideline.toneOfVoiceSummary"
            class="markdown-content"
          ></markdown>
          <button
            (click)="toggleToneOfVoiceExpansion()"
            class="text-blue-400 hover:text-blue-300 text-sm mt-1"
          >
            Show less
          </button>
        } @else {
          <p class="line-clamp-3">
            {{ data.guideline.toneOfVoiceSummary }}
          </p>
          <button
            (click)="toggleToneOfVoiceExpansion()"
            class="text-blue-400 hover:text-blue-300 text-sm mt-1"
          >
            Show more
          </button>
        }
      </div>
    }

    @if (data.guideline.visualStyleSummary) {
      <div class="detail-section">
        <strong>Visual Style:</strong>
        @if (isVisualStyleExpanded) {
          <markdown
            [data]="data.guideline.visualStyleSummary"
            class="markdown-content"
          ></markdown>
          <button
            (click)="toggleVisualStyleExpansion()"
            class="text-blue-400 hover:text-blue-300 text-sm mt-1"
          >
            Show less
          </button>
        } @else {
          <p class="line-clamp-3">
            {{ data.guideline.visualStyleSummary }}
          </p>
          <button
            (click)="toggleVisualStyleExpansion()"
            class="text-blue-400 hover:text-blue-300 text-sm mt-1"
          >
            Show more
          </button>
        }
      </div>
    }

    @if (data.guideline.presignedSourcePdfUrls?.length) {
      <div class="detail-section">
        <strong>Source Documents:</strong>
        <ul class="mt-1 space-y-2">
          @for (
            url of data.guideline.presignedSourcePdfUrls;
            track url;
            let i = $index
          ) {
            <li>
              <a
                [href]="url"
                target="_blank"
                rel="noopener noreferrer"
                class="pdf-link"
              >
                <mat-icon>picture_as_pdf</mat-icon>
                <span>Brand_Guideline_{{ i + 1 }}.pdf</span>
                <mat-icon class="ml-auto">open_in_new</mat-icon>
              </a>
            </li>
          }
        </ul>
      </div>
    }
  </div>
  <div mat-dialog-actions align="end">
    <button mat-button (click)="onCancel()">Close</button>
    @if (data.canEdit) {
      <button mat-button color="warn" (click)="onDelete()">Delete</button>
      <button
        mat-raised-button
        color="primary"
        (click)="replaceGuideline()"
        class="ml-2"
      >
        Replace
      </button>
    }
  </div>
} @else {
  <div mat-dialog-content>
    <p>
      Upload a PDF with your brand guidelines. We'll analyze it to help you
      generate on-brand content.
    </p>

    <form [formGroup]="form" class="flex flex-col gap-4 pt-3">
      <mat-form-field appearance="outline">
        <mat-label>Guideline Name</mat-label>
        <input matInput formControlName="name" required />
        @if (form.get('name')?.hasError('required')) {
          <mat-error>A name for the guideline is required.</mat-error>
        }
        @if (form.get('name')?.hasError('minlength')) {
          <mat-error>Name must be at least 3 characters long.</mat-error>
        }
      </mat-form-field>

      <div>
        <button type="button" mat-stroked-button (click)="fileInput.click()">
          <mat-icon>attach_file</mat-icon>
          Choose PDF
        </button>
        <input
          hidden
          type="file"
          #fileInput
          (change)="onFileSelected($event)"
          accept=".pdf"
        />
        @if (fileName) {
          <span class="ml-4">{{ fileName }}</span>
        }
        @if (
          form.get('file')?.hasError('required') && form.get('file')?.touched
        ) {
          <mat-error class="block mt-1">A PDF file is required.</mat-error>
        }
        <p class="text-xs text-gray-400 !my-2">Maximum file size: 50MB</p>
      </div>
    </form>
  </div>
  <div mat-dialog-actions align="end">
    <button mat-button (click)="onCancel()" [disabled]="isUploading">
      Cancel
    </button>
    <button
      mat-raised-button
      color="primary"
      (click)="onUpload()"
      [disabled]="!form.valid || isUploading"
    >
      @if (isUploading) {
        <mat-spinner [diameter]="20" class="inline-block mr-2"></mat-spinner>
        <span>Processing...</span>
      } @else {
        <span>Upload</span>
      }
    </button>
  </div>
}
